<template>
  <div class="data-statistics-container">
    <el-card class="livecode-header-card">
      <div class="livecode-header-card-title">
        <h3>活码查询</h3>
      </div>
      <el-row :gutter="30" class="livecode-header-card-content">
        <el-col :span="10" class="livecode-type">
          活码类型：
          <el-select size="small" v-model="livecodeType">
            <el-option label="分组活码" value="1"></el-option>
            <el-option label="普通活码" value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="10"  class="livecode-current">
          选择活码：
          <el-select size="small" v-model="livecodeCurrent">
            <el-option label="所有活码" value="1"></el-option>
            <el-option label="普通群" value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="warning">查询</el-button>
        </el-col>
      </el-row>
      <div class="livecode-header-card-footer">
        <div class="share-date-export">
          <span>
            导出图片
            <img :src="imgRootSrc+'download_white_logo.png'" alt="dowload_logo">
          </span>
          <span>
            生成分享链接
            <img :src="imgRootSrc+'share_white_logo.png'" alt="share_logo">
          </span>
          <span class="date-time-pick">
             日期选择<el-date-picker type="dates" size="mini" placeholder="选择一个或多个日期"></el-date-picker>
          </span>
        </div>
      </div>
    </el-card>
    <el-row :gutter="24">
     <el-col :span="16">
       <el-row :gutter="24">
        <el-col :span="6" class="content-card-col">
          <div class="content-card">
            <el-card v-for="item in accessType" :key="item">
              <div class="content-card-left">
                <div class="left-logo">
                  <img :src="imgRootSrc+item.img+'.png'" :alt="item.img" />
                </div>
                <div class="content-card-left-text">
                  <span class="content-card-data">{{ item.data }}</span>
                  <span class="content-card-title">{{ item.title }}</span>
                </div>
              </div>
              <div class="content-card-right">
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="18" class="data-list-col">
          <DataCurveChart ref="DataCurveChartRef"/>
        </el-col>
         <el-col :span="24">
           <MapPlugin ref="MapPluginRef"/>
         </el-col>
       </el-row>
     </el-col>
     <el-col :span="8">
       <OperatePieChart ref="OperatePieChartRef"/>
     </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue'
import MapPlugin from '@/components/usersComponents/statistics/mapPlugin'
import OperatePieChart from '@/components/usersComponents/statistics/operatePieChart'
import DataCurveChart from '@/components/usersComponents/statistics/dataCurveChart'

let { proxy } = getCurrentInstance()
const imgRootSrc = '/img/data-statistics-images/'
// 活码类型
let livecodeType = ref('1')
// 当前活码
let livecodeCurrent = ref('1')

// 访问类型
const accessType = [
  {title:'今日扫码次数',data:1200,img:'scan_code_today_logo'},
  {title:'今日扫码人数',data:852,img:'number_of_scanners_today_logo'},
  {title:'累计扫码次数',data:7622,img:'cumulative_scan_times_logo'},
  {title:'累计扫码人数',data:6200,img:'total_number_of_scanned_codes_logo'}
]

// 数据列表
let dataList = ref([
  { date: '2016-05-02', views: 2000, visits: 800},
  { date: '2016-05-04', views: 5000, visits: 1500}
])
const resizeFun = ()=>{
  proxy.$refs.DataCurveChartRef.chartResize()
  proxy.$refs.OperatePieChartRef.chartResize()
  proxy.$refs.MapPluginRef.chartResize()
}
onMounted(()=>window.addEventListener('resize',resizeFun,false))

onBeforeUnmount(()=>window.removeEventListener('resize',resizeFun))
</script>

<style lang="less" scoped>
.data-statistics-container {
  .livecode-header-card {
    border-radius: 52px 52px 12px 12px;
    background-color: @primary;
    margin-bottom: 24px;
    &:deep(.el-card__body){
      padding-left: 32px;
      .livecode-header-card-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h3{
          margin: 0;
          color: #FFFFFF!important;
        }
      }

      .livecode-header-card-content {
        margin-top: 20px;
        .el-select{
          width: calc(100% - 80px);
          .el-input__inner{
            height: 40px;
            color: #363636;
          }
          .el-input__suffix{
            display: flex;
            align-items: center;
            color: #6E6E6E;
            .el-input__suffix-inner{
              .el-icon-arrow-up{
                &:before{
                  color: #6E6E6E;
                }
              }
            }
          }
        }
        .el-button{
          width: 136px;
          height: 40px;
          float: right;
        }
        .livecode-type,
        .livecode-current{
          color: #FFFFFF;
          display: flex;
          align-items: center;
        }
      }
      .livecode-header-card-footer{
        text-align: right;
        .share-date-export{
          color: #FFFFFF;
          margin-top: 20px;
          .date-time-pick{
            margin-left: 50px;
            .el-date-editor{
              margin-left: 20px;
            }
          }
        }
      }
    }
  }
  .content-card-col,
  .data-list-col{
    margin-bottom: 24px;
  }
  .content-card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
}
</style>
